<template>
  <div class="head-cart">
    <div v-if="cartStore.length"
         :style="{width, height}"
         class="box">
      <div class="body">
        <head-cart-item v-for="item in cartList"
                        :key="item.skuId"
                        :data="item"
                        @click.stop/>
      </div>
      <div class="footer">
        <div class="left">
          <p>共{{ cartLength }}件商品</p>
          <p>￥{{ totalPrice }}</p>
        </div>
        <router-link class="right"
                     to="/cart">
          去购物车结算
        </router-link>
      </div>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import HeadCartItem from '@/components/library/HeadCartItem.vue'
import {useCartStore} from '@/stores/cart'
import {storeToRefs} from 'pinia'

let props = withDefaults(defineProps<{
  width?: string
  height?: string
}>(), {
  width: '400px',
  height: '400px'
})

let cartStore = useCartStore()
let {esList: cartList, length: cartLength, totalPrice} = storeToRefs(cartStore)

</script>

<style lang="less"
       scoped>
.head-cart {
  padding-top: 19px;

  .box {
    background-color: white;
    position: relative;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);

    &:before {
      content: '';
      position: absolute;
      background-color: white;
      top: -10px;
      right: 14px;
      width: 20px;
      height: 20px;
      transform: scaleX(.6) rotate(45deg);
      box-shadow: -3px -3px 5px rgb(0 0 0 / 10%);
    }

    .body {
      padding: 0 10px;
      margin-bottom: 2px;
      height: 330px;
      overflow: auto;

      &::-webkit-scrollbar {
        width: 10px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #eee;
        border-radius: 10px;
      }

      &::-webkit-scrollbar-track {
        background-color: #f8f8f8;
        border-radius: 4px;
      }
    }

    .footer {
      height: 70px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      background-color: #f8f8f8;

      .left {
        p:nth-of-type(1) {
          color: #999999;
        }

        p:nth-of-type(2) {
          font-size: 18px;
          color: @priceColor;
        }
      }

      .right {
        width: 190px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: @xtxColor;
        border: 1px solid @xtxColor;
        border-radius: 3px;
        background-color: @xtxLightColor;
      }
    }
  }
}
</style>